<template>
  <div>
    <el-row style="margin-top: 20px;">
      <el-col :span="16">
        <h3>负责人情况（负责人不得少于3人）</h3>
      </el-col>
      <el-col :span="8" style="text-align: right;">
        <el-button type="primary" @click="addList()"  size="default" style="width: 100px;margin-top: 8px;">新增
        </el-button>
      </el-col>
    </el-row>
    <el-row style="width: 100%;">
      <el-form :model="listForm" ref="listFormRef" style="width:100%;">
        <el-col :span="24" >
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" :data="listForm" border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="directorName" label="姓名" align="center" width="120">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorName'" :rules="listRules.directorName">
                  <el-input v-model="scope.row.directorName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorSex" label="性别" align="center" width="100">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorSex'" :rules="listRules.directorSex">
                  <el-select clearable  v-model="scope.row.directorSex" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in sexOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorAge" label="年龄" align="center" width="100">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorAge'" :rules="listRules.directorAge">
                  <el-input type="number" v-model="scope.row.directorAge" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorBirthday" label="出生日期" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorBirthday'" :rules="listRules.directorBirthday">
                  <el-date-picker value-format="YYYY-MM-DD" v-model="scope.row.directorBirthday"
                                  type="date" placeholder="请选择">
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="leadingCadres" label="是否为党政机关领导干部" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].leadingCadres'" :rules="listRules.leadingCadres">
                  <el-select clearable  v-model="scope.row.leadingCadres" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in shiOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
<!--            <el-table-column prop="directorFullTime" label="是否专职" align="center" width="100">-->
<!--              <template #default="scope">-->
<!--                <el-form-item :prop="'[' + scope.$index + '].directorFullTime'" :rules="listRules.directorFullTime">-->
<!--                  <el-select clearable  v-model="scope.row.directorFullTime" placeholder="请选择" style="width: 100%;">-->
<!--                    <el-option-->
<!--                      v-for="dict in shiOptions"-->
<!--                      :key="dict.id"-->
<!--                      :label="dict.name"-->
<!--                      :value="dict.id"-->
<!--                    />-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column prop="directorUnitPosition" label="工作单位及职务" align="center" width="200">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorUnitPosition'"
                              :rules="listRules.directorUnitPosition">
                  <el-input v-model="scope.row.directorUnitPosition" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorPositionType" label="职务类型" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPositionType'"
                              :rules="listRules.directorPositionType">
                  <el-input v-model="scope.row.directorPositionType" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorPositionName" label="职务名称" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPositionName'"
                              :rules="listRules.directorPositionName">
                  <el-input v-model="scope.row.directorPositionName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text"  size="default" @click="listDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-form>
    </el-row>
    <el-dialog title="新增负责人" v-model="addDialog">
      <el-form  size="default" :model="postForm" ref="ruleForm" label-width="80px" label-position="top">
        <el-row :gutter="20" type="flex" style="flex-wrap: wrap;">
          <el-col :span="12">
            <el-form-item label="姓名" prop="directorName">
              <el-input v-model="postForm.directorName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="directorSex">
              <el-select clearable  style="width:100%;" v-model="postForm.directorSex" placeholder="请选择性别">
                <el-option
                  v-for="item in sexOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="directorAge">
              <el-input type="number" v-model="postForm.directorAge" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否为党政机关领导干部" prop="leadingCadres">
              <el-select clearable  style="width:100%;" v-model="postForm.leadingCadres" placeholder="请选择">
                <el-option
                  v-for="item in shiOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否专职" prop="directorFullTime">
              <el-select clearable  style="width:100%;" v-model="postForm.directorFullTime" placeholder="请选择">
                <el-option
                  v-for="item in shiOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作单位及职务" prop="directorUnitPosition" label-width="140px">
              <el-input v-model="postForm.directorUnitPosition" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务类型" prop="directorPositionType">
              <el-input v-model="postForm.directorPositionType" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务名称" prop="directorPositionName" label-width="140px">
              <el-input v-model="postForm.directorPositionName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addDialog = false;addList()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getDictByCode, getTableInfoByPage, stSaveResponsible } from '@/views/yearCheck/ykb/st/st'

export default {
  data() {
    return {
      sexOptions: [{ id: '0', name: '未知' },{ id: '1', name: '男' }, { id: '2', name: '女' }],
      shiOptions: [{ id: '0', name: '未知' },{ id: '1', name: '是' }, { id: '2', name: '否' }],
      addDialog: false,
      postForm: {
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        directorAge: '',//年龄
        directorFullTime: '',//专职/兼职
        directorName: '',//姓名
        directorPositionName: '',//职务名称
        directorPositionType: '',//职务类型
        directorBirthday:'',//出生日期
        directorSex: '',//性别1-男，2-女 0-未知
        directorUnitPosition: '',//单位及职务/原单位/社会组织职务
        examineYear: localStorage.getItem('examineYear'),//审查年度
        id: '',
        leadingCadres: '',//是否为党政机关领导干部 0-未知、1-是 2-否
        organizationBaseId: ''//社团组织id
      },
      listForm: [],
      listRules: {
        directorName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        directorSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        directorAge: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        directorUnitPosition: [{ required: true, message: '请完善', trigger: 'blur' }],
        directorPositionType: [{ required: true, message: '请完善', trigger: 'blur' }],
        directorPositionName: [{ required: true, message: '请完善', trigger: 'blur' }],
        directorFullTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        leadingCadres:[{ required: true, message: '请选择', trigger: 'blur' }],
        directorBirthday:[{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  methods: {
    listDelete(index) {
      this.listForm.splice(index, 1)
    },
    addList() {
      this.listForm.push(Object.assign({}, this.postForm))
    },
    postInfo() {
      this.$refs.listFormRef.validate(valid=> {
        if (valid) {
          if(this.listForm == null || this.listForm.length == 0){
            return;
          }
          if(this.listForm.length < 3){
            this.$message({
              message: '负责人不得少于3人',
              type: 'error'
            })
            return
          }
          for (let i = 0; i < this.listForm.length; i++) {
            this.listForm[i].creditCode = localStorage.getItem('creditCode')
            this.listForm[i].examineYear = localStorage.getItem('examineYear')
          }
          stSaveResponsible(this.listForm).then(response => {
            this.$message({
              message: '负责人情况保存成功',
              type: 'success'
            })
            this.getInfo();
          })
        } else {
          this.$message({
            message: '请填写完整',
            type: 'error'
          })
        }
      });
    },
    getInfo() {
      getTableInfoByPage(2).then(response => {
        this.listForm = JSON.parse(JSON.stringify(response.data).replace(/null/g, '""'));
        if (this.listForm == null || this.listForm == '') {
          this.listForm = []
        }
        if (this.listForm.length == 0) {
          this.addList()
          this.addList()
          this.addList()
        }else if(this.listForm.length == 1){
          this.addList()
          this.addList()
        }else if(this.listForm.length == 2){
          this.addList()
        }
        for (let i = 0; i < this.listForm.length; i++) {
          this.listForm[i].directorSex += ''
          this.listForm[i].leadingCadres += ''
        }
      })
      //政治面貌politics 学历xueli
      getDictByCode('politics').then(response => {
        this.politicsOptions = response.data
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.el-form-item {
  margin: 2px;
}
</style>
